<template>
    <view class="container">
        <view class="user-info">
            <image class="user-avatar" src="/static/avatar.jpg" mode="aspectFill"></image>
            <view class="user-name">张小明</view>
            <view class="user-phone">13800138000</view>
        </view>
        
        <view class="user-menu">
            <view class="menu-group">
                <view class="menu-item" @click="goToMyAppointments">
                    <uni-icons type="calendar" size="25"></uni-icons>
                    <text class="menu-text">我的预约</text>
                    <uni-icons type="right" color="#1677ff" size="15"></uni-icons>
                </view>
                <view class="menu-item" @click="goToPatientList">
                    <uni-icons type="personadd" size="25"></uni-icons>
                    <text class="menu-text">就诊人管理</text>
                    <uni-icons type="right" color="#1677ff" size="15"></uni-icons>
                </view>
            </view>
            
            <view class="menu-group">
                <view class="menu-item" @click="goToSettings">
                    <uni-icons type="settings" size="25"></uni-icons>
                    <text class="menu-text">设置</text>
                    <uni-icons type="right" color="#1677ff" size="15"></uni-icons>
                </view>
                <view class="menu-item" @click="goToAbout">
                    <uni-icons type="navigate" size="25"></uni-icons>
                    <text class="menu-text">关于我们</text>
                    <uni-icons type="right" color="#1677ff" size="15"></uni-icons>
                </view>
            </view>
        </view>
        
        <view class="logout-btn" @click="logout">退出登录</view>
    </view>
</template>

<script>
export default {
    data() {
        return {}
    },
    methods: {
        goToMyAppointments() {
			uni.switchTab({
				url: '/pages/myAppointments/myAppointments'
			})
        },
        goToPatientList() {
            uni.navigateTo({
                url: '/pages/patientList/patientList'
            });
        },
        goToSettings() {
            uni.navigateTo({
                url: '/pages/settings/settings'
            });
        },
        goToAbout() {
            uni.navigateTo({
                url: '/pages/about/about'
            });
        },
        logout() {
            uni.showModal({
                title: '退出登录',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 这里可以添加退出登录的逻辑
                        console.log('退出登录');
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'success'
                        });
                        // 模拟退出登录后跳转到登录页
                        setTimeout(() => {
                            uni.navigateTo({
                                url: '/pages/login/login'
                            });
                        }, 1000);
                    }
                }
            });
        }
    }
}
</script>

<style>
uni-app, uni-page, uni-page-wrapper, uni-page-body {
    height: 100%;
}
.container {
    background-color: #f5f5f5;
	height: 100%;
	padding: 15px 0;
    box-sizing: border-box;
}

.user-info {
    background: linear-gradient(to bottom, #00d1ff, #3387cb);
    padding: 30px 15px;
    text-align: center;
    color: #fff;
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px;
}

.user-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.user-phone {
    font-size: 14px;
}

.user-menu {
    margin-top: 10px;
}

.menu-group {
    background-color: #fff;
    margin-bottom: 10px;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-text {
    flex: 1;
    font-size: 14px;
    color: #333;
	margin-left: 5px;
}

.logout-btn {
    background-color: #fff;
    color: #ff4d4f;
    font-size: 16px;
    text-align: center;
    padding: 15px 0;
    margin: 0 10px;
    border-radius: 8px;
    border: 1px solid #ff4d4f;
}
</style>
    